<template>
  <div class="wrap wrap_refund">
    <div class="mod_box mod_refund_head">
      <div class="title">{{order.order_title}}</div>
      <div class="info_line">
        <div class="label">出游时间</div>
        <div class="value">{{order._sTime}}</div>
      </div>
      <div class="info_line">
        <div class="label">门票数量</div>
        <div class="value">{{order.quantity}}张</div>
      </div>
    </div>
    <div class="mod_box mod_refund_price" v-if="order.is_appointment != 1">
      <div class="info_line">
        <div class="label">退款金额</div>
        <div class="value"><span class="price">&yen;{{refundableAmount}}</span></div>
      </div>
    </div>
    <div class="mod_box mod_refund_reason">
      <div class="info_line">
        <div class="label" v-if="order.is_appointment != 1">退款原因</div>
        <div class="label" v-if="order.is_appointment == 1">取消原因</div>
        <div class="value">
          <div class="option" :class="{current: currentReason === 1}" @click="setReason(1)">
            <div class="iconfont icon-zsunselected"></div>
            <div class="iconfont icon-zsselected"></div>
            <div class="option_text">行程有变</div>
          </div>
          <div class="option" :class="{current: currentReason === 2}" @click="setReason(2)">
            <div class="iconfont icon-zsunselected"></div>
            <div class="iconfont icon-zsselected"></div>
            <div class="option_text">买错票</div>
          </div>
          <div class="option" :class="{current: currentReason === 3}" @click="setReason(3)">
            <div class="iconfont icon-zsunselected"></div>
            <div class="iconfont icon-zsselected"></div>
            <div class="option_text">其他</div>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_box mod_btns">
      <div class="btn_refund" @click="doCommit">提交</div>
    </div>

  </div>
</template>

<script>
import fly from '@/utils/fly'
import { getOpenid } from '@/utils/login'
import { formatTime2 } from '@/utils/index'

export default {
  data () {
    return {
      refund_order_id: '',
      refundableAmount: 0,
      order: {},
      currentReason: 1
    }
  },
  methods: {
    setReason (id) {
      this.currentReason = id
    },
    async doCommit () {
      let openid = await getOpenid()
      let res = await fly.post(`Order/refund?wx_openid=${openid}&order_sn=${this.refund_order_id}&refund_reason=${this.currentReason}&refund_amount=${this.refundableAmount}`)
      if (res && res.code === 200) {
        wx.navigateBack({
          delta: 1
        })
      } else {
        wx.showToast({
          title: `提交退款单异常${res ? ('(' + res.code + ')') : ''}`,
          icon: 'none'
        })
      }
    }
  },
  async onLoad () {
    const {
      id
    } = this.$root.$mp.query
    this.refund_order_id = id

    wx.setNavigationBarTitle({
      title: '退款'
    })

    let openid = await getOpenid()
    let res = await fly.post(`Order/details?wx_openid=${openid}&order_sn=${this.refund_order_id}`)
    if (res && res.code === 200 && res.data) {
      let order = res.data.order
      order._sTime = formatTime2(new Date(order.start_time * 1000))
      order._eTime = formatTime2(new Date(order.end_time * 1000))

      this.order = order
    } else {

    }
    let refundRes = await fly.post(`Order/refundableAmount?wx_openid=${openid}&order_sn=${this.refund_order_id}`)
    if (refundRes && refundRes.code === 200) {
      this.refundableAmount = refundRes.data
    }
  }
}
</script>

<style lang="scss">
@import "refund.scss";
</style>
